import React, { useEffect, useState } from "react";
import {
  Form,
  InputNumber,
  Table,
  Typography,
  Button,
  Input,
  Select,
  TimePicker,
} from "antd";
import { getroad } from "../../api/operation_maintenance/road_points";


const App = () => {
  const { Option } = Select;
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const [form] = Form.useForm();

  const onGenderChange = (value) => {
    switch (value) {
      case "male":
        form.setFieldsValue({
          note: "Hi, man!",
        });
        break;
      case "female":
        form.setFieldsValue({
          note: "Hi, lady!",
        });
        break;
      case "other":
        form.setFieldsValue({
          note: "Hi there!",
        });
        break;
      default:
    }
  };
  const onReset = () => {
    form.resetFields();
  };

  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            style={{
              margin: 0,
            }}
            rules={[
              {
                required: true,
                message: `Please Input ${title}!`,
              },
            ]}
          >
            <soan>{inputNode}</soan>
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const [data, setData] = useState([]);
  const [editingKey, setEditingKey] = useState("");
  const isEditing = (record) => record.key === editingKey;
  const edit = (record) => {
    form.setFieldsValue({
      name: "",
      age: "",
      address: "",
      ...record,
    });
    setEditingKey(record.key);
  };
  const cancel = () => {
    setEditingKey("");
  };

  const columns = [
    {
      title: "序号",
      render: function (text, record, index) {
        return <h3>{index + 1}</h3>;
      },
    },
    {
      title: "所在省份",
      dataIndex: "asidekind",
    },
    {
      title: "所在城市",
      dataIndex: "nickname",
    },
    {
      title: "所在县区",
      dataIndex: "kind",
    },
    {
      title: "道路站点名称",
      dataIndex: "kind11",
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, record) => {
        return (
          <>
            <Typography.Link onClick={() => edit(record)}>操作</Typography.Link>
            <Typography.Link
              onClick={() => edit(record)}
              style={{ marginLeft: "10px", marginRight: "10px" }}
            >
              删除
            </Typography.Link>
            <Typography.Link onClick={() => edit(record)}>查看</Typography.Link>
          </>
        );
      },
    },
  ];
  useEffect(() => {
    getroad().then((res) => {
      console.log(res.data);
      setData(res.data);
    });
  }, []);
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === "age" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  return (
    <>
      <Form {...layout} form={form} name="control-hooks">
        <div className="left">
          <Form.Item name="note" label="流水号">
            <Input onChange={() => {}} />
          </Form.Item>
          <Form.Item label="所属停车场">
            <Select
              placeholder="Select a option and change input text above"
              onChange={onGenderChange}
              allowClear
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <Form.Item label="入位时间">
            <TimePicker.RangePicker></TimePicker.RangePicker>;
          </Form.Item>
          <Form.Item name="note" label="车牌号码">
            <Input onChange={() => {}} />
          </Form.Item>
          <Form.Item name="note" label="停车位编号">
            <Input onChange={() => {}} />
          </Form.Item>
          <Form.Item name="note" label="记录来源">
            <Input onChange={() => {}} />
          </Form.Item>
        </div>
        <div className="right">
          <Form.Item {...tailLayout} style={{ width: 300 }}>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginLeft: "10px", marginRight: "10px" }}
            >
              查询
            </Button>
            <Button type="primary" htmlType="button">
              新增
            </Button>
          </Form.Item>
        </div>
      </Form>
      <Form form={form} component={false} name="pagination">
        <Table
          rowKey="id"
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>
    </>
  );
};

export default App;
